﻿<!DOCTYPE html>
<html lang="fr">
<head>
<title>Dessin</title>
<link rel="stylesheet" href="styles/style.css" type="text/css" />
<meta charset="utf-8">
<link rel="stylesheet" media="screen, print, handheld" type="text/css"
	href="styles/styledessin.css" />
<script type="text/javascript" src='res/floue.js'></script>
<script type="text/javascript" src='res/tableau.js'></script>
<script type="text/javascript" src='res/emboss.js'></script>
<script type="text/javascript" src='JS/dessin.js'></script>
</head>
<body>
			<IFRAME id="frame" src=".\fragements\header.html"  scrolling=no frameborder=0 > </IFRAME>
			<div class="dvcanvas">
				<canvas id="cvs" width="550" height="350"
					onmousedown='evtrait(event)' ondrop="drop(event)"
					ondragover="Dragov(event)"></canvas>
			</div>

			<div class="arriere_plans" style="height: 400px; width: 100%">
			</div>

			<div></div>



			<div id='xetes' class="fentexte">

				<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
					<span>texte</span>
				</div>

				texte :
				<textarea onchange='chtxt()' onkeyup='chtxt()'></textarea>
				<br> police : <select onchange='chtxt()'>
					<option value="Arial">Arial</option>
					<option value="Helvetica">Helvetica</option>
					<option value="Times New Roman">Times New Roman</option>
					<option value="Times">Times</option>
					<option value="Serif">serif</option>
					<option value="Verdana">Verdana</option>
					<option value="Courier New">Courier New</option>
					<option value="Lucida Console">Lucida Console</option>
					<option value="Comic Sans MS">Comic Sans MS</option>
					<option value="Tahoma">Tahoma</option>
					<option value="Impact">Impact</option>
				</select> <br> taille
				<div class="scrolltexte"
					onmousedown='kscroll.ajoutevent(event,"texte")'>
					<div class="curtexte"></div>
				</div>
				<br>
				<button onclick='textefin()'>valider</button>
				<button onclick='ombre()'>ombre</button>

				<div class='police_p'>
					police pleine <input type='checkbox' checked='checked'
						onclick='chtxt()' />
				</div>

			</div>




			<div id='boiteombre' class="fenombre">

				<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
					<span>ombre</span>
				</div>

				<div class="divombre">
					<canvas id="omb" height="100" width="100"></canvas>
				</div>

				ombre x
				<div class="scrollombre"
					onmousedown='kscroll.ajoutevent(event,"ombrex")'>
					<div class="ctcurombre"></div>
				</div>
				<br> ombre y
				<div class="scrollombre"
					onmousedown='kscroll.ajoutevent(event,"ombrey")'>
					<div class="ctcurombre"></div>
				</div>
				<br> floue....
				<div class="scrollombre"
					onmousedown='kscroll.ajoutevent(event,"ombref")'>
					<div class="curombre"></div>
				</div>
				<br> couleur <input type="color" onchange='formombre()'
					id="coulombre"'></input> <br>
				<button onclick='validombre()'>valider</button>
			</div>




			<div id='lumi' class="fenlumi">

				<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
					<span>contraste</span>
				</div>

				<div class="scrollumi"
					onmousedown='kscroll.ajoutevent(event,"lumiaire")'>
					<div class="curlumi"></div>
				</div>

				<br>
				<button onclick='lume()'>valider</button>
			</div>




			<div id='fencolorimetre'>

				<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
					<span>couleur</span>
				</div>

				<div class="scrollcoul"
					onmousedown='kscroll.ajoutevent(event,"rouge")'>
					<div class="curscrolcoul"></div>
				</div>

				<div class="scrollcoul"
					onmousedown='kscroll.ajoutevent(event,"vert")'>
					<div class="curscrolcoul"></div>
				</div>

				<div class="scrollcoul"
					onmousedown='kscroll.ajoutevent(event,"bleu")'>
					<div class="curscrolcoul"></div>
				</div>
				<br>
				<button onclick='coule()'>valider</button>
			</div>




			<div class='fenedition'>

				<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
					<span>edition</span>
				</div>

				<div class="couledition">
					<div class='anuref'>
						<img src='res/annul.png' title="annuler" onclick='annuler()' />
					</div>

					<div class='anuref'>
						<img src='res/refait.png' title="refaire" onclick='refaire()' />
					</div>

					<div class='anuref'>
						<img src='res/sauver.png' title="sauver" onclick='sauver()' />
					</div>

					<div class='anuref'>
						<img src='res/nouveau.png' title="nouveau" onclick='raz()' />
					</div>

					<div class="contcouvrir">
						<input type='file' multiple='multiple' id='fileinput'
							class="couvrir" onchange='drop()' /> <input type='button'
							value='Load' title="ouvrir" onclick='drop();'>
					</div>

					<div class='anuref'>
						<img src='res/couper.png' title="couper" onclick='cccs("couper")' />
					</div>

					<div class='anuref'>
						<img src='res/copier.png' title="copier" onclick='cccs("copier")' />
					</div>

					<div class='anuref'>
						<img src='res/coller.png' title="coller" onclick='colle()' />
					</div>

					<div class='anuref'>
						<img src='res/supprimer.png' title="supprimer"
							onclick='cccs("supp")' />
					</div>

					<select onchange='traitaille(this)' title="police">
						<option value=1>1</option>
						<option value=3>3</option>
						<option value=4>4</option>
						<option value=6>6</option>
						<option value=8>8</option>
						<option value=10>10</option>
						<option value=14>14</option>
						<option value=20>20</option>
						<option value=40>40</option>
						<option value=100>100</option>
					</select>

					<div id='petpi' onclick='couleur(this)'></div>

				</div>
			</div>





			<div class='fencouleur' id='fencouleur'>

				<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
					<span>couleur</span>
				</div>

				<div class="coulcoul">
					<div class='coul' onclick='couleur(this)'></div>
					<div class='coul2' onclick='couleur(this)'></div>
					<div class='coul3' onclick='couleur(this)'></div>
					<div class='coul4' onclick='couleur(this)'></div>
					<div class='coul5' onclick='couleur(this)'></div>
					<div class='coul6' onclick='couleur(this)'></div>
					<div class='coul7' onclick='couleur(this)'></div>
					<div class='coul8' onclick='couleur(this)'></div>
					<div class='coul9' onclick='couleur(this)'></div>
					<div class='coul10' onclick='couleur(this)'></div>
					<div class='coul11' onclick='couleur(this)'></div>
					<div class='coul12' onclick='couleur(this)'></div>
					<div class='coul13' onclick='couleur(this)'></div>
				</div>
				<br> r
				<div class="scrollcoul"
					onmousedown='kscroll.ajoutevent(event,"prouge")'>
					<div class="curscrolcoul2"></div>
				</div>

				v
				<div class="scrollcoul"
					onmousedown='kscroll.ajoutevent(event,"pvert")'>
					<div class="curscrolcoul2"></div>
				</div>

				b
				<div class="scrollcoul"
					onmousedown='kscroll.ajoutevent(event,"pbleu")'>
					<div class="curscrolcoul2"></div>
				</div>

				<img src='res/arc.jpg' class="arccoul" id="arccoul"
					onmousedown='palette.arcenevent(event)'></img>
				<div id='dv'></div>

				<button onclick='couleur2(this)'>valider</button>
				<input type='texte' id='leinput' value='#000000'> <input
					type='texte' id='leinput2' value='0.0.0'>

			</div>




			<div class='fenoutils'>

				<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
					<span>outils</span>
				</div>

				<div class="divoutils">

					<div class='outils'>
						<img src='res/pipette.png' title="pipette"
							onclick='dispatche("pipette")' />
					</div>
					<div class='outils'>
						<img src='res/cadre.png' title="rectangle de selection"
							onclick='dispatche("cadre")' />
					</div>
					<div class='outils'>
						<img src='res/crayon.png' title="crayon"
							onclick='dispatche("trait")' />
					</div>

					<div class='outils'>
						<img src='res/gomme.png' title="gomme"
							onclick='dispatche("gomme")' />
					</div>

					<div class='outils'>
						<img src='res/pot.png' title="pot de peinture"
							onclick='dispatche("pot")' />
					</div>

					<div class='outils'>
						<img src='res/txte.png' title="pot de peinture"
							onclick='texte(event)' />
					</div>
				</div>
			</div>




			<div class='fenreglage'>

				<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
					<span>reglage & effet</span>
				</div>

				<div class="divreglage">

					<div onclick='voir_reg(event)'>image</div>
					<ul>
						<li onclick='recadre()'>recadre</li>
						<li onclick='miroir("v")'>miroir v</li>
						<li onclick='miroir("h")'>miroir h</li>
						<li onclick='rotata()'>rotation</li>
						<li onclick='vuredim()'>dimension</li>
						<li onclick='initzdt()'>zone de travail</li>
					</ul>


					<div onclick='voir_reg(event)'>reglage</div>
					<ul>
						<li onclick='lume()'>luminosité</li>
						<li onclick='coule()'>couleur</li>
						<li onclick='ombre()'>ombre</li>
						<li onclick='nb()'>n & b</li>
					</ul>


					<div onclick='voir_reg(event)'>effet</div>
					<ul>
						<li onclick='init_floue()'>floue</li>
						<li onclick='initboss()'>relief</li>
						<li onclick='initpixeli()'>pixeliser</li>
						<li onclick='initdessin()'>decolorer</li>
						<li onclick='tableau()'>Sharpen</li>
						<li onclick='inversion()'>inverser</li>
					</ul>

				</div>
			</div>




			<div id='fendimension' class='fendimension'>

				<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
					<span>dimension</span>
				</div>
				hauteur:<input type='texte' id='redimh' onkeyup='ratio(this)'>
				<br> largeur:<input type='texte' id='rediml'
					onkeyup='ratio(this)'> <br>
				<button onclick='redim()'>valider</button>

				<div class='dimproport'>
					conserver proportions <input id='proportion' type='checkbox'
						checked='checked' />
				</div>

			</div>




			<div id='floue' class="fenfloue">

				<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
					<span>floue</span>
				</div>

				<div class="scrolfloue"
					onmousedown='kscroll.ajoutevent(event,"floue")'>
					<div class="curfloue"></div>
				</div>
				<br>
				<button onclick='init_floue()'>valider</button>
			</div>




			<div class='fenzdt' id='fenzdt'>

				<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
					<span>zone de travail</span>
				</div>

				<div class='zdtgen'>

					<input type='checkbox' checked='checked' class='zdt1'>

					<div class='zdtmi'>

						<input type='checkbox' checked='checked' class='zdt2'>
						<div class='zdtelem'></div>
						<input type='checkbox' checked='checked' class='zdt3'>

					</div>

					<input type='checkbox' checked='checked' class='zdt4'>

				</div>

				hauteur:<input type='texte' id='zdth'> <br> largeur:<input
					type='texte' id='zdtl'> <br>
				<button onclick='zdt()'>valider</button>
			</div>



			<div id='pixi' class="fenpixi">

				<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
					<span>pixeliser</span>
				</div>

				<div class="scrolfloue"
					onmousedown='kscroll.ajoutevent(event,"pixi")'>
					<div class="curfloue"></div>
				</div>
				<br>
				<button onclick='initpixeli()'>valider</button>
			</div>





			<div id='relif' class="fenrelif">

				<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
					<span>relief</span>
				</div>

				<div class="scrolfloue"
					onmousedown='kscroll.ajoutevent(event,"bossautre")'>
					<div class="curfloue"></div>
				</div>

				<div class="scrolfloue"
					onmousedown='kscroll.ajoutevent(event,"bossgris")'>
					<div class="curfloue"></div>
				</div>

				Direction: <select id="value-direction" class="demo-select"
					onchange="boss()">
					<option value="topleft">Top left</option>

					<option value="top">Top</option>
					<option value="topright">Top right</option>
					<option value="right">Right</option>
					<option value="bottomright">Bottom right</option>
					<option value="bottom">Bottom</option>
					<option value="bottomleft">Bottom left</option>
					<option value="left">Left</option>
				</select><br />

				<div>
					couleurs <input type="checkbox" onclick="boss()"
						class="demo-checkbox" />
				</div>

				<button onclick='initboss()'>valider</button>
			</div>



			<div id='dess' class="fendecol">

				<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
					<span>decolorer</span>
				</div>

				<div class="scrolfloue"
					onmousedown='kscroll.ajoutevent(event,"dessin1")'>
					<div class="curfloue"></div>
				</div>

				<div class="scrolfloue"
					onmousedown='kscroll.ajoutevent(event,"dessin2")'>
					<div class="curfloue"></div>
				</div>

				<br>
				<button onclick='initdessin()'>valider</button>
			</div>
		
		
</body>
</html>
